<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Phaser UI Editor</title>
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="/font/iconfont.css">
    <link rel="stylesheet" href="/component/filemange/filemange.css">
    <script src="/component/request.js"></script>
</head>

<body>
    <div id="body">
        <div id="tools">
            <div class="title">清雨编辑器</div>
            <div class="tools-item" id="tools_item_alt_f">
                文件（ATL+F）
                <!-- <div class="pop-list">
                    <div class="tools-pop-item" name="NewPro">新建工程</div>
                    <div class="tools-pop-item" name="SelectPro">历史工程</div>
                    <div style="width: 100%; box-sizing: border-box; padding: 0 5px;">
                        <div style="width: 100%; height: 2px; background-color: #787878;"></div>
                    </div>
                    <div class="tools-pop-item" name="SavePro">保存（CTRL+S）</div>
                </div> -->
            </div>

            <div class="tools-item" id="tools_item_alt_e">
                编辑（ATL+E）
                <!-- <div class="pop-list">
                    <div class="tools-pop-item" name="Revoke">撤销（CTRL+Z）</div>
                    <div class="tools-pop-item" name="Redo">回撤（CTRL+Y）</div>
                </div> -->
            </div>

            <div class="tools-item" id="tools_item_alt_p">
                打包（ATL+P）
                <!-- <div class="pop-list">
                    <div class="tools-pop-item" name="Export">导出组件（CTRL+ALT+E）</div>
                    <div class="tools-pop-item" name="Import" style="color: #333;">导入组件（CTRL+ALT+I）</div>
                </div> -->
            </div>


            <div id="userInfo" username="">
                用户信息
            </div>

            <div id="login" username="">登录</div>


        </div>

        <div id="app" style="background-color: rgb(0, 0, 0); display: none;">
            <div id="control-column">
                <div class="control-group">
                    <h2>布局</h2>
                    <div class="control-list">
                        <div class="control-item" onclick="window.placeComponents('vertical')">
                            <span class="iconfont">&#xe60a;</span>
                            <h3>垂直布局</h3>
                        </div>
                        <div class="control-item" onclick="window.placeComponents('horizontal')">
                            <span class="iconfont">&#xe60d;</span>
                            <h3>水平布局</h3>
                        </div>
                        <div class="control-item" onclick="window.placeComponents('grid')">
                            <span class="iconfont">&#xe6b5;</span>
                            <h3>网格布局</h3>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <h2>基础</h2>
                    <div class="control-list">
                        <div class="control-item" onclick="window.placeComponents('view')">
                            <span class="iconfont">&#xe628;</span>
                            <h3>矩形视图</h3>
                        </div>
                        <div class="control-item" onclick="window.placeComponents('scroll')">
                            <span class="iconfont">&#xe61c;</span>
                            <h3>滚动视图</h3>
                        </div>
                        <div class="control-item" onclick="window.placeComponents('label')">
                            <span class="iconfont">&#xe636;</span>
                            <h3>文字标签</h3>
                        </div>

                        <div class="control-item" onclick="window.placeComponents('button')">
                            <span class="iconfont">&#xea3c;</span>
                            <h3>点击按钮</h3>
                        </div>

                        <div class="control-item" onclick="window.placeComponents('input')">
                            <span class="iconfont">&#xe70f;</span>
                            <h3>输入框框</h3>
                        </div>
                    </div>
                </div>
            </div>


            <div id="miider">
                <div id="informationBar">
                </div>

                <div id="phaser-container">

                </div>
            </div>

            <div id="attribute-column">
                <div id="node-tree-box">
                    <div class="control-group">
                        <h2>节点树</h2>
                        <div id="tree-box">
                            <table class="tree-table">
                                <thead>
                                    <tr>
                                        <th style="width: 150px;">对象</th>
                                        <th style="width: 130px;">类型</th>
                                    </tr>
                                </thead>
                                <tbody id="tree-tbody">
                                    <!-- <tr>
                                        <td>
                                            <div class="tree-item">
                                                <span class="tree-content">文件1-1.txt</span>
                                            </div>
                                        </td>
                                        <td>文本文件</td>
                                    </tr> -->
                                </tbody>
                            </table>

                        </div>
                    </div>

                </div>

                <div id="attribute-box">


                    <div class="control-group attribute-group">
                        <h2>属性</h2>
                        <div class="attribute-list">
                            <div class="attribute-item" id="attr_name">
                                <div class="attribute-name" title="组件名称">组件</div>
                                <div class="attribute-value">View</div>
                            </div>
                            <div class="attribute-item" id="attr_id">
                                <div class="attribute-name" title="自定义ID">自定义ID</div>
                                <div class="attribute-value" contenteditable="true">View1</div>
                            </div>
                            <div class="attribute-item" id="attr_class">
                                <div class="attribute-name" title="自定义分类">自定义CLASS</div>
                                <div class="attribute-value" contenteditable="true"></div>
                            </div>
                        </div>
                    </div>

                    <div class="control-group">
                        <h2>基础属性</h2>
                        <div class="attribute-list">
                            <div class="attribute-item" id="attr_widthRatio" style="font-weight: 800;">
                                <div class="attribute-name" title="宽度百分比">宽度百分比</div>
                                <!-- <div class="attribute-value" contenteditable="true">0</div> -->
                                <input class="attribute-value" min="0" max="100" value="100" type="range" />

                            </div>
                            <div class="attribute-item" id="attr_heightRatio" style="font-weight: 800;">
                                <div class="attribute-name" title="高度百分比">高度百分比</div>
                                <!-- <div class="attribute-value" contenteditable="true">0</div> -->
                                <input class="attribute-value" min="0" max="100" value="100" type="range" />

                            </div>

                            <div class="attribute-item" id="attr_width">
                                <div class="attribute-name" title="当前实际宽度（优先百分比计算）">宽度</div>
                                <div class="attribute-value" contenteditable="true">100</div>
                            </div>
                            <div class="attribute-item" id="attr_height">
                                <div class="attribute-name" title="当前实际高度（优先百分比计算）">高度</div>
                                <div class="attribute-value" contenteditable="true">200</div>
                            </div>
                            <div class="attribute-item" id="attr_miniWidth">
                                <div class="attribute-name" title="最小宽度">最小宽度</div>
                                <div class="attribute-value" contenteditable="true">0</div>
                            </div>
                            <div class="attribute-item" id="attr_miniHeight">
                                <div class="attribute-name" title="最小高度">最小高度</div>
                                <div class="attribute-value" contenteditable="true">0</div>
                            </div>
                            <div class="attribute-item" id="attr_top">
                                <div class="attribute-name" title="顶边">顶边</div>
                                <div class="attribute-value" contenteditable="true">0</div>
                            </div>

                            <div class="attribute-item" id="attr_left">
                                <div class="attribute-name" title="左边">左边</div>
                                <div class="attribute-value" contenteditable="true">0</div>
                            </div>

                            <div class="attribute-item" id="attr_right">
                                <div class="attribute-name" title="右边（左边将失效）">右边</div>
                                <div class="attribute-value" contenteditable="true">-</div>
                            </div>

                            <div class="attribute-item" id="attr_bottom">
                                <div class="attribute-name" title="底边（顶边将失效）">底边</div>
                                <div class="attribute-value" contenteditable="true">-</div>
                            </div>

                            <div class="attribute-item" id="attr_background">
                                <div class="attribute-name" title="背景颜色">背景颜色</div>
                                <input class="attribute-value" style="border: none; outline: none;" type="color" />
                            </div>

                            <div class="attribute-item" id="attr_alpha">
                                <div class="attribute-name" title="透明度">透明度</div>
                                <!-- <div class="attribute-value" contenteditable="true">0.5</div> -->
                                <input class="attribute-value" min="0" max="100" value="100" type="range" />
                            </div>

                            <div class="attribute-item" id="attr_borderWidth">
                                <div class="attribute-name" title="边框宽度">边框宽度</div>
                                <!-- <div class="attribute-value" contenteditable="true">0</div> -->
                                <input class="attribute-value" min="0" max="100" value="0" type="range" />

                            </div>

                            <div class="attribute-item" id="attr_borderColor">
                                <div class="attribute-name" title="边框颜色">边框颜色</div>
                                <!-- <div class="attribute-value" contenteditable="true">#000000</div> -->
                                <input class="attribute-value" style="border: none; outline: none;" type="color" />

                            </div>
                        </div>
                    </div>
                    <div class="control-group" id="image-attribute">
                        <h2>图片属性</h2>

                        <div class="attribute-list">

                            <div class="attribute-item" id="attr_imageUrl">
                                <div class="attribute-name" title="图片">图片</div>
                                <!-- <input class="attribute-value" style="border: none; outline: none;" type="url" /> -->
                                <select class="attribute-value" id="imageSelect" value="">
                                    <option value="" selected="true"></option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="control-group" id="label-attribute">
                        <h2>文本属性</h2>
                        <div class="attribute-list">

                            <div class="attribute-item" id="attr_placeholder">
                                <div class="attribute-name" title="提示信息">提示信息</div>
                                <div class="attribute-value" contenteditable="true"></div>
                            </div>

                            <div class="attribute-item" id="attr_inputType">
                                <div class="attribute-name" title="输入方式">输入方式</div>
                                <select class="attribute-value">
                                    <option value="text">正常</option>
                                    <option value="number">数值</option>
                                    <option value="password">密码</option>
                                </select>
                            </div>


                            <div class="attribute-item" id="attr_text">
                                <div class="attribute-name" title="标签文本">文本内容</div>
                                <div class="attribute-value" contenteditable="true"></div>
                            </div>
                            <div class="attribute-item" id="attr_fontSize">
                                <div class="attribute-name" title="字体大小">字体大小</div>
                                <div class="attribute-value" contenteditable="true"></div>
                            </div>
                            <div class="attribute-item" id="attr_fontColor">
                                <div class="attribute-name" title="字体颜色">字体颜色</div>
                                <!-- <div class="attribute-value" contenteditable="true">Label</div> -->
                                <input class="attribute-value" style="border: none; outline: none;" type="color" />
                            </div>

                        </div>
                    </div>

                    <div class="control-group" id="layout-attribute">
                        <h2>布局属性</h2>
                        <div class="attribute-list">
                            <div class="attribute-item" id="attr_alignX">
                                <div class="attribute-name" title="垂直对齐方式">水平对其方式</div>
                                <select class="attribute-value">
                                    <option value="left">左边对齐</option>
                                    <option value="center">居中对齐</option>
                                    <option value="right">右边对齐</option>
                                </select>
                            </div>
                            <div class="attribute-item" id="attr_alignY">
                                <div class="attribute-name" title="对齐方式">垂直对其方式</div>
                                <select class="attribute-value">
                                    <option value="top">顶边对齐</option>
                                    <option value="center">居中对齐</option>
                                    <option value="bottom">底边对齐</option>
                                </select>
                            </div>

                            <div class="attribute-item" id="attr_gap">
                                <div class="attribute-name" title="元素间距">元素间距</div>
                                <div class="attribute-value" contenteditable="true">0</div>
                            </div>
                            <div class="attribute-item" id="attr_paddingTop">
                                <div class="attribute-name" title="顶部内边距">顶边距</div>
                                <div class="attribute-value" contenteditable="true">0</div>
                            </div>
                            <div class="attribute-item" id="attr_paddingBottom">
                                <div class="attribute-name" title="底部内边距">底边距</div>
                                <div class="attribute-value" contenteditable="true">0</div>
                            </div>

                            <div class="attribute-item" id="attr_paddingLeft">
                                <div class="attribute-name" title="左侧内边距">左边距</div>
                                <div class="attribute-value" contenteditable="true">0</div>
                            </div>
                            <div class="attribute-item" id="attr_paddingRight">
                                <div class="attribute-name" title="右侧内边距">右边距</div>
                                <div class="attribute-value" contenteditable="true">0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div id="project">
            <div id="project-box">
                <div id="project-left">
                    <div class="project-left-item project-left-item-selectd">历史组件</div>
                    <!-- <div class="project-left-item">新建组件</div> -->
                </div>

                <div id="project-history">
                    <!-- <div id="project-box-title">
                        <span>工程列表</span>
                        <span class="iconfont" id="project-box-close" onclick="ProjectCloseBox()">&#xe611;</span>
                    </div> -->
                    <div id="project-history-content">
                        <!-- <div class="project-history-item">
                            <span class="iconfont">&#xe60a;</span>
                            <div class="project-history-item-name">测试工程111</div>
                            <div class="project-history-item-desc">工程说明</div>
                            <div class="project-history-item-button">打开</div>
                            <span class="iconfont project-history-item-del">&#xe612;</span>
                        </div> -->
                    </div>
                </div>
            </div>


        </div>


        <div id="bottom">

            <div id="bottomHeader" style="width: 100%; height: 20px; border-bottom: 1px solid #000;">
            </div>

            <div style="width: 100%; height: calc(100% - 20px);" id="bottomContent">

            </div>
        </div>


    </div>

    <!-- <div style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); position: fixed; left: 0; top: 0; z-index: 999;"
        id="mask"></div> -->

</body>

<script type="module" src="/src/main.js"></script>


</html>